<template>
  <el-dialog
    :visible.sync="visible"
    title=""
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="50%"
    top="100px"
  >
    <div class="dialogInner">
      <span class="guestSourceName">{{ dataForm.guestSourceName }}</span>
      <div class="personInfo">
        <span>{{ dataForm.guestName }}</span>
        <span>{{ dataForm.guestPhone }}</span>
        <!-- <span :style="{ background: roomStatusColor[dataForm.status] }">
                <template v-if="dataForm.status == 0"> 待支付 </template>
                <template v-if="dataForm.status == 1"> 已支付 </template>
                <template v-if="dataForm.status == -1"> 已取消 </template>
                <template v-if="dataForm.status == -2"> 退款中 </template>
                <template v-if="dataForm.status == -3"> 已退款 </template>
                <template v-if="dataForm.status == 3"> 已完成 </template>
            </span> -->
      </div>
      <el-collapse v-model="activeNames" @change="handleChange" :border="false">
        <el-collapse-item title="订单信息" name="1">
          <template slot="title">
            <p style="font-weight: 600; font-size: 18px">订单信息</p>
          </template>
          <div
            v-for="(item, index) in dataForm.detailFormList"
            :key="index"
            class="roomList"
          >
            <div class="p1">
              <p>
                <span>{{ dataForm.houseBaseName }}</span
                >——<span>{{ item.roomNumber }}</span
                ><span
                  class="status"
                  :style="{
                    background: roomStatusColor2[dataForm.orderStatus],
                  }"
                  >{{ dataForm.orderStatus | delStatus }}</span
                >
              </p>
              <p>{{ item.roomAmount }}</p>
            </div>
            <div class="other">
              <p>其他费用/支出</p>
              <p>{{ item.otherAmount }}</p>
            </div>
            <!-- 其他费用/支出明细 -->
            <div class="otherList">
              <p v-for="(o, i) in item.otherData" :key="i">
                <span>{{ o.projectName }}</span>
                <span>{{ o.defaultPrice }}</span>
                <span>{{ o.num }}</span>
              </p>
            </div>
            <div class="other">
              <p>早餐支出</p>
              <p>{{ item.breakfastAmount }}</p>
            </div>
            <!-- 早餐支出 -->
            <div class="otherList">
              <p v-for="(o, i) in item.breakfastData" :key="i">
                <span>{{ o.breakfastName }}</span>
                <span>{{ o.price }}</span>
                <span>{{ o.num }}</span>
              </p>
            </div>
          </div>
          <div></div>
        </el-collapse-item>
      </el-collapse>
      <div class="moneyInfo">
        <span>订单号:{{ dataForm.orderCode }}</span>
        <span>实付金额:{{ dataForm.realityPay }}</span>
        <span>优惠券金额:{{ dataForm.discountCouponPrice || 0}}</span>
        <span
          >还需收款:<span v-if="( parseFloat(dataForm.orderAmount) - parseFloat(dataForm.realityPay) - parseFloat(dataForm.discountCouponPrice))>0">{{
            parseFloat(dataForm.orderAmount) - parseFloat(dataForm.realityPay) - parseFloat(dataForm.discountCouponPrice)
          }}</span><span v-else>0</span></span
        >
      </div>
      <div style="padding: 20px 0; margin-bottom: 60px">
        <p
          style="margin-bottom: 10px"
          v-if="dataForm.orderStatus == 4 || dataForm.orderStatus == 5"
        >
          取消原因：{{ dataForm.refundReason }}
        </p>
        <p>备注：{{ dataForm.remarks }}</p>
      </div>
      <div class="orderInfo">
        <span>订单金额:{{ dataForm.orderAmount }}</span>
        <span>创建时间:{{ dataForm.orderTime }}</span>
        <!-- <span>办理员工:{{ dataForm.orderAmoun }}</span> -->
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <div></div>
      <div class="right">
        <el-button
          type="primary"
          @click="confirmOrder()"
          v-if="
            $hasPermission('hotel:hotelorder:confirm') &&
            dataForm.orderStatus == -1
          "
          >确认订单</el-button
        >
        <el-button
          type="info"
          @click="checkData()"
          v-if="
            $hasPermission('hotel:hotelorder:cancelOrder') &&
            dataForm.orderStatus == -1
          "
          >取消订单</el-button
        >
        <template
          v-if="
            $hasPermission('hotel:hotelorder:update') &&
            dataForm.orderStatus == 1
          "
        >
          <el-button type="primary" @click="editOrder(1)">编辑订单</el-button>
          <el-button type="primary" @click="editOrder(2)">办理入住</el-button>
        </template>
        <template v-if="dataForm.orderStatus == 2">
          <el-button
            v-if="$hasPermission('hotel:hotelorder:update')"
            type="primary"
            @click="editOrder(1)"
            >编辑订单</el-button
          >
          <el-button
            v-if="$hasPermission('hotel:hotelorder:checkout')"
            type="warning"
            @click="checkoutRoom()"
            >办理退房</el-button
          >
        </template>
      </div>
    </div>
    <!-- 弹窗,  修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      :orderStatus="orderStatus"
      @refreshDataList="getInfo"
    ></add-or-update>
    <el-dialog
      title="取消订单"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form :model="check">
        <el-form-item label="退款原因" label-width="120px">
          <el-input v-model="check.refundReason" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmCheck()">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
var that;
import AddOrUpdate from "../roomStatus/createOrder";
export default {
  data() {
    return {
      orderStatus: "",
      addOrUpdateVisible: false, //编辑订单
      visible: false,
      payState: [
        {
          val: 4,
          label: "已取消",
        },
        {
          val: -2,
          label: "待支付",
        },
        {
          val: -1,
          label: "待确定",
        },
        {
          val: 1,
          label: "已预订",
        },
        {
          val: 2,
          label: "已入住",
        },
        {
          val: 3,
          label: "已退房",
        },
        {
          val: 5,
          label: "已退款",
        },
      ],
      roomStatusColor: {
        0: "#f29130",
        1: "#2d8cf0",
        "-1": "#969799",
        "-2": "#ed4014",
        "-3": "#969799",
        3: "#2d8cf0",
      },
      roomStatusColor2: {
        "-2": "#ccc",
        "-1": "#6faef1",
        1: "#f29130",
        2: "#67c23a",
        3: "#969799",
        4: "#AAA",
        5: "#AAA",
      },
      activeNames: "1",
      dataForm: {
        id: "",
      },
      dialogFormVisible: false,
      check: {
        initiator: 1,
        refundReason: "",
        status: -1,
        orderCode: "",
      },
      flag: false,
    };
  },
  components: {
    AddOrUpdate,
  },
  filters: {
    delStatus(val) {
      let d = that.payState.filter((item) => item.val == val);
      if (d[0]) {
        return d[0].label;
      }
    },
  },
  created() {
    that = this;
  },
  methods: {
    // 编辑
    editOrder(status) {
      this.addOrUpdateVisible = true;
      this.orderStatus = status;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = this.dataForm.id;
        this.$refs.addOrUpdate.init();
      });
    },
    //确认订单
    confirmOrder() {
      this.$confirm("确定该操作？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      })
        .then(() => {
          this.$http
            .get(`/hotel/order/confirm/${this.dataForm.id}`)
            .then((res) => {
              if (res.data.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            });
        })
        .catch(() => {});
    },
    //取消订单
    checkData() {
      this.dialogFormVisible = true;
      this.check.orderCode = this.dataForm.orderCode;
    },
    confirmCheck() {
      if (!this.flag) {
        this.flag = true;
      } else {
        return;
      }
      this.$http.post("/hotel/order/cancelOrder", this.check).then((res) => {
       
        if (res.data.code !== 0) {
           this.flag = false;
          return this.$message.error(res.data.msg);
        }
        this.dialogFormVisible = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 500,
          onClose: () => {
            this.visible = false;
            this.$emit("refreshDataList");
          },
        });
      });
    },
    //办理退房
    checkoutRoom() {
      this.$confirm("确定该操作？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      })
        .then(() => {
          this.$http
            .get(`/hotel/order/checkout/${this.dataForm.id}`)
            .then((res) => {
              console.log(res);
              if (res.data.code !== 0) {
                return this.$message.error(res.data.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            });
        })
        .catch(() => {});
    },
    handleChange() {},
    init() {
      this.visible = true;
      this.$nextTick(() => {
        // this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/hotel/order/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

.orderInfo {
  position: absolute;
  width: 100%;
  height: 40px;
  background: #f5f5f5;
  line-height: 40px;
  left: 0;
  display: flex;
  justify-content: space-around;
  bottom: 100px;
}

.moneyInfo {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  border: 1px solid #eee;
}

.roomList {
  border-top: 1px solid #eee;
  padding-top: 20px;

  .p1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    p {
      font-size: 16px;

      span {
        &.status {
          display: inline-block;
          color: #fff;
          padding: 3px 5px;
          font-size: 14px;
          border-radius: 5px;
          margin-left: 4px;
        }
      }

      &:last-child {
        color: #f44;
        font-size: 24px;
        font-weight: 600;
        margin: 0;
      }
    }
  }

  .other {
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 15px;
    padding: 0 20px;
    margin-top: 10px;
    margin-bottom: 4px;
  }

  .otherList {
    p {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      font-size: 14px;
      color: #777;
      background: #f5f5f5;
      margin: 0 0 2px 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.personInfo {
  padding: 20px 30px 50px 120px;
  display: flex;
  align-items: center;

  span {
    &:nth-child(1) {
      font-size: 18px;
      margin-right: 50px;
    }

    &:nth-child(2) {
      font-size: 15px;
      flex: 1;
    }

    &:nth-child(3) {
      display: inline-block;
      color: #fff;
      padding: 5px 8px;
      font-size: 16px;
      border-radius: 5px;
      margin-left: 4px;
      min-width: 100px;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
    }
  }
}

.guestSourceName {
  position: absolute;
  top: 12px;
  left: -11px;
  height: 50px;
  width: 140px;
  z-index: 111;
  background: #17b3a3;
  color: #fff;
  border-radius: 0 35px 35px 0;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
}
</style>
